<template>
    <div class="person">
        <header>
            <span><img src="/img/avatar/mr.jpg"></span>
            <div class="info">
                <h3>{{username|account}}</h3>
                <span>Lv.1</span>
            </div>
            <div class="about-you">
                <span><span class="num">1</span> 关注</span>
                <span><span class="num">3</span> 粉丝</span>
                <span><span class="num">50</span> 积分</span>
            </div>
        </header>
        <div class="my-tabs">
            <div>
                <router-link to="/hunter/person/myorder">
                    <span class="icon dingdan"></span>
                    <p>订单中心</p>
                </router-link>
            </div>
            <div>
                <span class="icon shoucang"></span>
                <p>我的收藏</p>
            </div>
            <div>
                <span class="icon comment"></span>
                <p>我的评价</p>
            </div>
        </div>
        <div class="my-items">
            <div>
                <span>
                    <span class="fa fa-file-image-o grey"></span>
                    <span>&emsp;游记&故事集</span>
                </span>
                <span class="fa fa-chevron-right grey"></span>
            </div>
            <div>
                <span>
                    <span class="fa fa-volume-control-phone grey"></span>
                    <span>&emsp;面包客服</span>
                </span>
                <span class="fa fa-chevron-right grey"></span>
            </div>
            <div>
                <span>
                    <span class="fa fa-exclamation-circle grey"></span>
                    <span>&emsp;帮助中心</span>
                </span>
                <span class="fa fa-chevron-right grey"></span>
            </div>
        </div>
        <div class="exit">
            <span>
                <span class="fa fa-file-image-o grey"></span>
                <span @touchstart="exitClick">&emsp;退出登录</span>
            </span>
            <span class="fa fa-chevron-right grey"></span>
        </div>
        <Alert v-show="isAlert">{{alertContent}}</Alert>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    export default {
        data: function() {
            return {
                username:'',
                alertContent:''
            }
        },
        computed:{
            ...mapState([
                "isAlert",
            ])
        },
        created:function(){
            this.$store.commit("setIsLoading",false);
        },
        mounted: function() {
            this.username = JSON.parse(localStorage.getItem("userInfo")).tel;
        },
        methods: {
            exitClick:function(){
                this.$store.dispatch("requestExit")
                .then(res=>{
                    if(!res.data.err){
                        this.$store.commit("setIsLogin",false);
                        localStorage.removeItem("userInfo");
                        this.alertContent = res.data.msg;
                        this.$store.commit("setIsAlert",true);
                        setTimeout(()=> {
                            this.$store.commit("setIsAlert",false);
                            location.href = "#/hunter";
                        }, 1800);
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .person {
        width: 100vw;
        height: 100vh;
        background-color: #F6F6F6;
        color: #4a4a4a;
    }
    
    header {
        width: 100vw;
        height: 39vh;
        background-image: url("/static/img/personbg.jpg");
        position: relative;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50%;
        padding-top: 7.5vh;
        color: #fff;
        text-align: center;
        overflow: hidden;
        z-index: 10;
    }
    
    header::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .3)) rgba(0, 0, 0, .3);
        z-index: -1;
    }
    
    header img {
        width: 22vw;
        height: 22vw;
        border-radius: 50%;
        border: 3px solid #eee;
    }
    .info{
        padding-top: 2vh;
        position: relative;
        width: 60vw;
        margin: 0 auto;
    }
    .info h3{
        margin: 0;
        display: inline-block;
        font-size: 1rem;
        font-weight: 400;
    }
    .info span{
        font-size: 0.8rem;
        position: absolute;
        top: 2vh;
        right: 4vw;
        background: #4abdcc;
        padding: 2px 8px;
        border-radius: 1.8rem;
    }
    .about-you{
        width: 80vw;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 6vh;
    }
    .num{
        font-size: 1.1rem;
    }
    .my-tabs{
        margin-top: 2vh;
        padding:4vw 0;
        display: flex;
        justify-content: space-around;
        background-color: #fff;
        text-align: center;
        font-size: 0.8rem;
    }
    .my-tabs p{
        margin: 0;
        margin-top: 2vw;
    }
    .icon{
        display: inline-block;
        width: 1.5rem;
        height: 1.55rem;
    }
    .dingdan{
        background-size: 1.5rem 1.55rem;
        background-image: url("/static/img/dingdan.png");
    }
    .shoucang{
        background-size: 1.5rem 1.55rem;
        background-image: url("/static/img/shoucang.png");
    }
    .comment{
        background-size: 1.5rem 1.55rem;
        background-image: url("/static/img/comment.png");
    }
    .my-items{
        margin:1.8vh 0;
        background-color: #fff;
    }
    .my-items>div{
        padding: 3vh 3vw;
        font-size: 0.9rem;
        color: #4a4a4a;
        display: flex;
        justify-content: space-between;
    }
    .grey{
        font-size: 0.93rem;
        color: #ccc;
    }
    .exit{
        padding: 3vh 3vw;
        font-size: 0.9rem;
        color: #4a4a4a;
        display: flex;
        justify-content: space-between;
        background-color: #fff;
    }
</style>